import React, {useCallback, useState} from 'react';
import {Checkbox, Form, Input, Modal, Space, Spin, Switch} from 'antd';
import {SysModuleModel} from '../data';

import styles from "@/utils/utils.less";
import TreeSelectParent from "@/lib/TreeSelectParent";
import service from "@/pages/sys/module/service";
import {FormInstance} from "antd/lib/form";
import {EditDialogProps} from "@/global";
import useForm from "@/hooks/useForm";
import useLoad from "@/hooks/useLoad";
import useEditModalFooter from "@/hooks/useEditModalFooter";
import useSave from "@/hooks/useSave";
import EditModalFooter from "@/lib/EditModalFooter";
import {Store} from "rc-field-form/lib/interface";

const FormItem = Form.Item;
const TextArea = Input.TextArea;

/** 表单布局 */
const formLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 15},
};

/** 系统模块编辑表单组件 */
const Edit: React.FC<EditDialogProps> = props => {
  const {params: {created, newModel, id, onSubmitSucess}, visible, hide} = props;
  const {form, bind, reset, submit} = useForm();
  let {loading: dataLoading, data: model} = useLoad<SysModuleModel>({
    isLoad: Boolean(id),
    isClear: false,
    defaultData: newModel,
    onLoad: () => service.selectById(id),
    onSuccess: bind,
  }, [id]);
  const {finishCallback, ...footerProps} = useEditModalFooter({created,reset,hide,onSubmitSucess});
  const {submitLoading, save} = useSave<SysModuleModel>({created, onSave: service.save,});

  const onFinish = useCallback((values: any) => {save(model, values, finishCallback);}, [model]);

  return (
    <Modal
      title={created ? '新建系统模块' : '编辑系统模块'}
      visible={visible}
      width={700}
      destroyOnClose
      maskClosable={false}
      onCancel={hide}
      footer={(
        <EditModalFooter
          {...footerProps}
          okLoading={dataLoading || submitLoading}
          onOk={submit}
          onCancel={hide}/>
      )}
    >
      <Spin spinning={dataLoading || submitLoading} wrapperClassName={styles.h100p}>
        {model && (<EditForm {...{form, model, created, onFinish}}/>)}
      </Spin>
    </Modal>
  );
};

/** 表单组件 */
function EditForm(props: { created: boolean, model: SysModuleModel, form: FormInstance, onFinish: (values: Store) => void }) {
  const {created, model, form, onFinish} = props;
  model.parentId = String(model.parentId) === '0' ? undefined : model.parentId;
  const [menuChecked, setMenuChecked] = useState<boolean>(model.menu || false);
  const [winChecked, setWinChecked] = useState<boolean>(model.win || false);
  const [webChecked, setWebChecked] = useState<boolean>(model.web || false);

  return (
    <Form form={form} onFinish={onFinish} initialValues={model} {...formLayout}>
      <FormItem name="parentId" label="上级模块">
        <TreeSelectParent
          allowClear={true}
          onLoadTreeData={service.selectTreeList}
          created={Boolean(created)}
          dataId={model.id}
          dataParentId={model.parentId}
          getPopupContainer={triggerNode => triggerNode.parentElement}/>
      </FormItem>
      <FormItem name="name" label="模块名称"
                rules={[{required: true, message: '请输入模块名称'}]}>
        <Input maxLength={100}/>
      </FormItem>
      <FormItem name="code" label="模块编码"
                rules={[{required: true, message: '请输入模块编码'}]}>
        <Input maxLength={100}/>
      </FormItem>
      <FormItem name="menu" label="菜单类型" valuePropName="checked">
        <Switch checkedChildren="菜单" unCheckedChildren="权限" onChange={(checked, _) => setMenuChecked(checked)}/>
      </FormItem>

      {menuChecked && (<>
        <FormItem label="应用类型">
          <Space direction="horizontal">
            <FormItem noStyle name="web" valuePropName="checked">
              <Checkbox onChange={e => setWebChecked(e.target.checked)}>Web应用</Checkbox>
            </FormItem>
            <FormItem noStyle name="win" valuePropName="checked">
              <Checkbox onChange={e => setWinChecked(e.target.checked)}>WinForm应用</Checkbox>
            </FormItem>
          </Space>
        </FormItem>
      </>)}

      {menuChecked && webChecked && (
        <>
          <FormItem name="webCls" label="Web图标">
            <Input maxLength={50}/>
          </FormItem>
          <FormItem name="webUrl" label="Web路径">
            <Input maxLength={200}/>
          </FormItem>
        </>
      )}

      {menuChecked && winChecked && (
        <>
          <FormItem name="winCls" label="Win图标">
            <Input maxLength={50}/>
          </FormItem>
          <FormItem name="winUrl" label="Win路径">
            <Input maxLength={200}/>
          </FormItem>
        </>
      )}

      <FormItem label="选项">
        <Space direction="horizontal">
          <FormItem noStyle name="status" valuePropName="checked"><Switch checkedChildren="启用" unCheckedChildren="停用"/></FormItem>
          <FormItem noStyle name="publiced" valuePropName="checked"><Switch checkedChildren="公开" unCheckedChildren="不公开"/></FormItem>
          {menuChecked && (
            <FormItem noStyle name="expand" valuePropName="checked"><Switch checkedChildren="展开" unCheckedChildren="折叠"/></FormItem>)}
        </Space>
      </FormItem>

      {menuChecked && (<>
        <FormItem name="param" label="参数">
          <TextArea rows={3} maxLength={2000} className={styles.verticalResize}/>
        </FormItem>
      </>)}

      <FormItem name="remark" label="备注">
        <TextArea rows={3} maxLength={500} className={styles.verticalResize}/>
      </FormItem>
    </Form>
  );
}

export default Edit;

